{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}尚硅谷书城-登录{% endblock title %}
{% block topfiles %}
    <script>
        $(function () {
            $('#btnLogin').click(function () {
                // 获取用户名和密码
                var username = $('#username').val()
                var password = $('#pwd').val()
                var csrf = $('input[name="csrfmiddlewaretoken"]').val()
                var remember = $('input[name="remember"]').prop('checked')
                var verifycode = $('input[name="vc"]').val()
                // 发起ajax请求
                var params = {
                    'username': username,
                    'password': password,
                    'csrfmiddlewaretoken': csrf,
                    'remember': remember,
                    'verifycode': verifycode,
                }
                $.post('/user/login_check/', params, function (data) {
                    // 用户名密码错误 {'res':0}
                    // 登录成功 {'res':1}
                    if (data.res == 0) {
                        $('#username').next().html('用户名或密码错误').show()
                    } else {
                        // 跳转页面
                        location.href = data.next_url // /user/
                    }
                })
            })
        })
    </script>
{% endblock topfiles %}
{% block header_con %}{% endblock header_con %}
{% block search_bar %}{% endblock search_bar %}
{% block body %}
    <div class="login_top clearfix">
        <a href="index.html" class="login_logo"><img src="{% static 'images/logo.png' %}"
                                                     style="width: 160px; height: 53px;"></a>
    </div>

    <div class="login_form_bg">
        <div class="login_form_wrap clearfix">
            <div class="login_banner fl"></div>
            <div class="slogan fl">学计算机 · 来尚硅谷</div>
            <div class="login_form fr">
                <div class="login_title clearfix">
                    <h1>用户登录</h1>
                    <a href="{% url 'user:register' %}">立即注册</a>
                </div>
                <div class="form_input">
                    {% csrf_token %}
                    <input type="text" id="username" class="name_input" value="{{ username }}" placeholder="请输入用户名">
                    <div class="user_error">输入错误</div>
                    <input type="password" id="pwd" class="pass_input" placeholder="请输入密码">
                    <div class="pwd_error">输入错误</div>
                    <div class="more_input clearfix">
                        <input type="checkbox" name="remember" {{ checked }}>
                        <label>记住用户名</label>
                        <a href="#">忘记密码</a>
                    </div>
{#                    <div style="top: 100px; position: absolute;">#}
{#                        <input type="text" id="vc" name="vc">#}
{#                        <img id='verifycode' src="/user/verifycode/"#}
{#                             onclick="this.src='/user/verifycode/?'+Math.random()" alt="CheckCode"/>#}
{#                    </div>#}
                    <input type="button" id="btnLogin" value="登录" class="input_submit">
                </div>
            </div>
        </div>
    </div>
{% endblock body %}
{% block cart_count %}{% endblock cart_count %}
